
class OssFileEditableTagGroup extends Component {

    constructor(props) {
        super(props);

        this.state={
            tags: props.record.tagList==null?[]:props.record.tagList.map(u=>u.tagName),
            inputVisible: false,
            inputValue: '',
        }
    }

    handleClose =async removedTag => {
        debugger
        const tags = this.state.tags.filter(tag => tag !== removedTag);
        let r=await  window.MIO.ossFileDeleteTag({
            ossFileId:this.props.record.id,
            tagName:removedTag
        });
        this.setState({ tags });
    };

    showInput = () => {
        this.setState({ inputVisible: true }, () => this.input.focus());
    };

    handleInputChange = e => {
        this.setState({ inputValue: e.target.value });
    };

    handleInputConfirm =async () => {
        const { inputValue } = this.state;
        let { tags } = this.state;
        if (inputValue && tags.indexOf(inputValue) === -1) {
            tags = [...tags, inputValue];
        }
        let r=await  window.MIO.ossFileAddTag({
            ossFileId:this.props.record.id,
            tagName:inputValue
        });
        this.setState({
            tags,
            inputVisible: false,
            inputValue: '',
        });
    };

    saveInputRef = input => (this.input = input);

    render() {
        const { tags, inputVisible, inputValue } = this.state;
        return (
            <div>
                {tags.map((tag, index) => {
                    const isLongTag = tag.length > 20;
                    const tagElem = (
                        <Tag key={tag}  closable={true} onClose={() => this.handleClose(tag)}>
                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                        </Tag>
                    );
                    return isLongTag ? (
                        <Tooltip title={tag} key={tag}>
                            {tagElem}
                        </Tooltip>
                    ) : (
                        tagElem
                    );
                })}
                {inputVisible && (
                    <Input
                        ref={this.saveInputRef}
                        type="text"
                        size="small"
                        style={{ width: 78 }}
                        value={inputValue}
                        onChange={this.handleInputChange}
                        onBlur={this.handleInputConfirm}
                        onPressEnter={this.handleInputConfirm}
                    />
                )}
                {!inputVisible && (
                    <Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
                        <Icon type="plus" /> New Tag
                    </Tag>
                )}
            </div>
        );
    }
}



class MiOssFileList extends BaseTableList  {

    constructor(props) {
        super(props);
        this.fixedKey="id";
        this.filter = [ 'tag_name_list' ];
        this.fetchUrl="/img2data/ossFile/list"
        this.actioncolumns = false;
        this.placeholder="请输入标签";
        this.state.filter= {  tag_name_list: ''};
        this.columns=this.getColumns();
    }


    res_data = {
        id: {
            label: '序号',
            width: 50
        },
        createUserName :{
            label: '创建人',
            width: 100
        },
        gmtCreate: {
            label: '创建时间',
            width: 200
        },
        ossUrl: {
            label: '图片',
            width: 100
        },
        tagNameList: {
            label: '标签',
            width: 400
        }
    }





    //新增
    handleCreate(){



    }

    actionRender(text, row, index) {
        return(
            <p >
                <a href="javascript:void(0)" onClick={()=>{
                    M.SetStateSession({requestId:row.requestId});
                    location.hash="#/MiApiLogList";
                }} style={{marginLeft: 10}} >日志</a>
            </p>
        )
    }


    viewRender(key,res_data,text, row, index){
        if(key=='ossUrl'){
            return <img width={50} height={50} src={text} />
        }else if(key=='gmtCreate'){
            return <p style={{width: res_data[key]['width']-32,margin: 0,"textOverflow":"ellipsis"}}>
                <Tooltip placement="top" title={row[key]}>
                    {row[key]}
                </Tooltip>
            </p>
        }else if(key=='tagNameList'){
            return <OssFileEditableTagGroup record={row} />
        }
        else{
            return <p style={{width: res_data[key]['width']-32,margin: 0,"overflow": "hidden","textOverflow":"ellipsis","whiteSpace": "nowrap"}}>
                <Tooltip placement="top" title={row[key]}>
                    {row[key]}
                </Tooltip>
            </p>
        }
    }


   async fileChange({target}) {
        let split= target.files[0].name.split(".");
        this.inputFileOsskey="root/project/img2data/data/img/"+split[0]+"-"+new Date().getTime()+"."+split[1];
        let addOssFileRes= await  new Promise((resolve,reject) => {
            MIO.uplodaOssFile(this.inputFileOsskey,  target.files[0],d=>{
                console.log("process=>",d);
            },async d=>{
                resolve(d)
            },d=>{
                reject(d)
            });
        }) ;
        let ossFileAddResult=await  MIO.ossFileAdd({
            name: target.files[0].name,
            ossKey:this.inputFileOsskey,
            capacity: target.files[0].size
        });
        this.fetch();
        return false;
    }



    inputRender(){
        const {pagination, selectedRows, selectedRowKeys } = this.state;
        return <div>
            <Form style={{"display":"flex",padding: "24px 0 0 24px"}}>
                <div style={{flex: 1,display:  'flex'}}>
                    <Popover placement={'bottomLeft'} content={this.filterContent()} trigger="hover">
                        <Button style={{"marginRight": 15,"top": 4}}>{"筛选"}</Button>
                    </Popover>
                    <Form.Item>
                        <Input  name="keywords" style={{width: 300}} placeholder={this.placeholder} defaultValue={pagination.keywords}/>
                    </Form.Item>
                    <Button  type="primary" onClick={this.handleSearch} style={{"position":"relative","left":15,"top":3}}>搜索</Button>
                </div>

                <label  className={"ming_cursor_pointer ant-btn ant-btn-primary"} style={{marginRight: 60}}>
                    <input onChange={v=>this.fileChange(v)} type="file"
                           style={{display: "none"}} />
                    <div style={{transform:"translateY(3px)"}}>
                        <Icon type="upload" />上传
                    </div>
                </label>

            </Form>
            <div style={{position: 'relative',top: -15,left: 25}}>
                {
                    this.tagsRender()
                }
            </div>
        </div>
    }

}











